<template>
	<view>
		<uni-nav-bar fixed @clickLeft="$pageBack()" left-icon="back" title="发布" background-color="#ECE6D5" :status-bar="true"></uni-nav-bar>
		<view class="r_top flex_jc_sb">
			<view class="r_top_l flex">
				<view class="ttimg flex_jc_cent">
					<image src="/static/q.png" mode=""></image>
				</view>
				{{ title ? title : '选择活动' }}
			</view>
			<view class="r_top_r flex" @click="goselect">
				<view class="" v-if="title == ''">选择您参加的活动发布吧~</view>
				<uni-icons type="right" color="#D1D1D6"></uni-icons>
			</view>
		</view>

		<view class="content">
			<view class="title flex_jc_sb">
				<input v-model="params.title" type="text" placeholder="用你的标题，吸引更多人的点赞吧" placeholder-class="iii" maxlength="20" />
				<view class="">{{ params.title.length }}/20</view>
			</view>
			<view class="subtitle">
				<textarea placeholder-class="iii" placeholder="与人善言，暖于布帛" v-model="params.content" :auto-height="true" maxlength="-1"></textarea>
				<view class="imglist">
					<view class="items" v-for="(item, index) in params.imgs" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<image src="/static/close.png" mode="" class="icon" @click="removeimg(index)"></image>
					</view>
					<view v-if="verifyModel == '0'" class="items1 flex_jc_cent" @click="chooseFENGMIAN()">
						<uni-icons type="plusempty" color="#979797" size="26"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="handleBlock">
			<view class="items flex_jc_sb">
				<view class="items_l flex">
					<image src="/static/r1.png" mode=""></image>
					评论区
				</view>
				<view class="">
					<switch :checked="params.reply == 1" @change="onSwitchChange('reply', $event)" color="#D8C6A7" style="transform: scale(0.6)" />
				</view>
			</view>
			<view class="items flex_jc_sb">
				<view class="items_l flex">
					<image src="/static/r2.png" mode=""></image>
					仅自己可见
				</view>
				<view class="">
					<switch :checked="params.self == 1" @change="onSwitchChange('self', $event)" color="#D8C6A7" style="transform: scale(0.6)" />
				</view>
			</view>
			<view class="items flex_jc_sb">
				<view class="items_l flex">
					<image src="/static/r3.png" mode=""></image>
					内容涉及心理创伤，请谨慎评论
				</view>
				<view class="">
					<switch :checked="params.caution == 1" @change="onSwitchChange('caution', $event)" color="#D8C6A7" style="transform: scale(0.6)" />
				</view>
			</view>
		</view>

		<view class="btn_zw"></view>
		<view class="handle_block_bottom">
			<view class="handle_block flex_jc_sb">
				<view class="handle_l" @click="handleSend(0)">
					<image src="/static/r4.png" mode=""></image>
					<view class="">保存草稿</view>
				</view>
				<view class="handle_r" @click="handleSend(1)">
					<view class="btn" :class="btnactive ? 'activebtn' : ''">发布</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false">
			<view class="popup">
				<view class="title">{{ popuptit }}！</view>
				<view class="pop_content">{{ popupcontent }}！</view>
				<view class="pop_btn" @click="gogogo">去查看</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, watch, computed, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { chooseAndUploadImage } from '@/utils/upload';
import { communitySend, articleDraftInfo } from '@/api/community.js';
import { getActivityInfo } from '@/api/activity.js';

const { proxy } = getCurrentInstance();
const params = reactive({
	send: '1', // 是否发布：1是 0否(存草稿)
	id: 0, // 编辑草稿时 必传
	activityId: null, // 活动ID
	title: '', // 标题
	content: '', // 内容
	images: '', // 图片
	reply: 1, // 是否开启评论 1是 0否
	self: 0, // 是否开启自己可见 1是 0否
	caution: 0, // 是否开启谨慎评论 1是 0否
	imgs: []
});
const popupRef = ref(null);
const popuptit = ref('');
const popupcontent = ref('');
const close = () => {
	popupRef.value.close();
};
const title = ref('');
const getInfo = (id) => {
	getActivityInfo({ id }).then((res) => {
		if (res.code == 200) {
			title.value = res.data.name;
		}
	});
};
const onSwitchChange = (type, e) => {
    const value = e.detail.value ? 1 : 0;
    // 更新对应的参数
    params[type] = value;
    // 这里可以添加提交到后端或其他逻辑
    console.log(`${type} 状态变更:`, value);
};
import { getConfig } from '@/api/login.js';
const verifyModel = ref(0)
// 看看这个有没有活动id有的话就查一下数据
onShow(() => {
	uni.$once('communityID',function(e){
		if (e) {
			params.activityId = e
			getInfo(e);
		}
	})
	getConfig({}).then(res=>{
		console.log(res);
		if(res.code == 200){
			verifyModel.value = res.data.verifyModel
		}
	})
});
onLoad((option) => {
	//草稿箱过来的
	if (option.sendType == 'set') {
		articleDraftInfo({ id: option.id }).then((res) => {
			if (res.code == 200) {
				if(res.data.activityId){
					getInfo(res.data.activityId);
				}
				Object.assign(params, res.data);
				if (res.data.images) {
					params.imgs = res.data.images.split(',');
				}
			}
		});
	}
});
const gogogo = () => {
	if (params.send == 1) {
		uni.switchTab({
			url: '/pages/community/community'
		});
		uni.$emit('changeCommunity')
	} else {
		uni.switchTab({
			url: '/pages/user/user'
		});
	}
};
const btnactive = computed(() => {
	const hasBasicInfo = params.title.trim() && params.content;
	// 当所有核心条件都满足时，btnactive 为 true
	return hasBasicInfo;
});
const chooseFENGMIAN = async (e) => {
	try {
		params.imgs = await chooseAndUploadImage({
			count: 9,
			uploadText: '上传中...'
		});
	} catch (err) {
		console.error('头像上传失败：', err);
	}
};
const removeimg = (index) => {
	params.imgs.splice(index, 1);
};
// 0草稿 1发布
const handleSend = (type) => {
	if (!btnactive.value) {
		return;
	}
	params.send = type;
	if (params.imgs.length != 0) {
		params.images = params.imgs.join(',');
	}
	console.log(params);
	// 代码能执行到这里，说明要么是保存草稿，要么是发布且校验通过
	proxy.$throttling(() => {
		communitySend(params).then((res) => {
			if (res.code == 200) {
				if (type == 0) {
					popuptit.value = '保存成功';
					popupcontent.value = '保存草稿箱成功，您可以随时查看编辑';
				} else {
					popuptit.value = '发布成功';
					popupcontent.value = '心声已入稻浪 ，静待同歌回响';
				}
				popupRef.value.open();
			}
		});
	});
};
const goselect = () => {
	uni.navigateTo({
		url: '/pages/community/select'
	});
};
</script>
<style lang="scss">
page {
	background: #fff;
}
.popup {
	width: 620rpx;
	height: 360rpx;
	background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 32rpx 30rpx;
	box-sizing: border-box;
	.icon {
		display: block;
		text-align: right;
	}
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #4e3f23;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop_content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #b19561;
		text-align: center;
		margin: 40rpx auto;
	}
	.pop_btn {
		width: 280rpx;
		height: 72rpx;
		background: #d8c6a7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 72rpx;
		margin: 0 auto;
	}
}
.r_top {
	width: 750rpx;
	height: 80rpx;
	background: #f7f7f7;
	padding: 18rpx 30rpx;
	box-sizing: border-box;
	.r_top_l {
		.ttimg {
			width: 44rpx;
			height: 44rpx;
			background: #d8c6a7;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin-right: 14rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
	}
	.r_top_r {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #d1d1d6;
	}
}
.content {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #d1d1d6;
		input {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000;
			flex: 1;
		}
	}
	.subtitle {
		margin-top: 30rpx;
		border-top: 1px solid #d1d1d6;
		padding-top: 24rpx;
		textarea {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			min-height: 300rpx;
			height: 100%;
		}
		.imglist {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.items {
				width: 156rpx;
				height: 156rpx;
				margin-right: 16rpx;
				margin-bottom: 15rpx;
				position: relative;
				image {
					display: block;
					width: 156rpx;
					height: 156rpx;
					border-radius: 12rpx;
				}
				.icon {
					width: 32rpx;
					height: 32rpx;
					top: -8rpx;
					right: -8rpx;
					position: absolute;
					z-index: 1;
				}
			}
			.items1 {
				width: 156rpx;
				height: 156rpx;
				background: #f7f7f7;
				border-radius: 12rpx;
			}
		}
	}
}
.handleBlock {
	border-top: 8rpx solid #f7f7f7;
	padding: 14rpx 0rpx 24rpx 30rpx;
	box-sizing: border-box;
	.items {
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #d1d1d6;
	}
	.items_l {
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #1b1b1b;
	}
	.items:last-child {
		border-bottom: none;
	}
}
.handle_block_bottom {
	width: 750rpx;
	min-height: 100rpx;
	background: #ffffff;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 2;
	.handle_block {
		height: 100rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		.handle_l {
			text-align: center;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #aeaeac;
		}
		.handle_r {
			.btn {
				width: 400rpx;
				height: 80rpx;
				background: #f7f7f7;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #979797;
				text-align: center;
				line-height: 80rpx;
			}
			.activebtn {
				background: #d8c6a7;
				color: #75613e;
			}
		}
	}
}
.iii {
	color: #d1d1d6;
}
</style>
